<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>用户列表</title>
  <link rel="stylesheet" type="text/css" media="screen"
        href="../static/css/bootstrap.min.css">
</head>
<body>

<div class="container">
  <ol class="breadcrumb">
    <li><a href="#">用户管理</a></li>
    <li class="active">用户列表</li>
    <li style="float:right">
      <a href="/loginOut">退出</a>&nbsp;&nbsp;&nbsp;&nbsp;</li>
  </ol>

  <!-- 主体内容开始 -->
  <!-- 第一行开始 -->
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <!-- 表单开始 -->
      <form action="" class="form-horizontal">
        <!-- panel开始 -->
        <div class="panel panel-info">
          <div class="panel-heading"><i class="fa fa-search"></i>&nbsp;&nbsp;查询</div>
          <!-- panel-body开始 -->
          <div class="panel-body">

            <div class="row">
              <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5 ">
                <div class="form-group">
                  <label for="userName" class="col-sm-3 control-label">用户名</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" name="userName"
                           placeholder="用户名">
                  </div>
                </div>

              </div>

            </div>

          </div>
          <!-- panel-body结束 -->
          <div class="panel-footer text-right">
            <button type="reset" name="resetBtn" id="resetBtn"
                    class="btn btn-warning">重置</button>
            <input type="submit" value="查询" class="btn btn-primary" ></input>
            <button type="button" name="addBtn" class="btn btn-info"
                    onclick="location.href='addUser.html'">添加用户</button>
          </div>
        </div>
        <!-- panel结束 -->
      </form>
      <!--表单结束 -->
    </div>

  </div>
  <!-- 第一行结束 -->

  <div class="row">
    <div class="col-md-12">
      <div class="panel panel-primary">
        <div class="panel-heading">用户列表</div>
        <table class="table table-bordered table-hover text-center">
          <thead>
          <tr class="info">
            <td>用户名称</td>
            <td>用户密码</td>
            <td>操作</td>
          </tr>
          </thead>
          <tbody id="tb-content">

          </tbody>
        </table>

      </div>
    </div>

  </div>

</div>
</body>
</html>
<script src="../static/js/axios.min.js"></script>
<script>
  //在页面加载的时候 获取所有用户信息数据
  window.onload = function () {
    // alert(11111)
    const url = "/user/list"
    axios.get(url)
            .then(function (res) {
              // console.log(res.data)
              const responseBody = res.data
              if (responseBody.code === 200){
                //tbody 添加 字符串数据 进行表格渲染
                const users = responseBody.data
                //循环遍历集合
                let str = ""
                for (let i = 0; i < users.length; i++) {
                  str += `
									<tr>
										<td>${users[i].username}</td>
										<td>${users[i].password}</td>
										<td>
										<button type="button" name="queryBtn" class="btn btn-success btn-xs" >更新</button>|
										<button type="button" name="queryBtn" onclick="deleteUser(${users[i].id})" class="btn btn-danger btn-xs" >删除</button>
										</td>
									</tr>
									`
                  console.log(str)
                }
                //找元素
                document.getElementById("tb-content").innerHTML = str
              }





            })


  }

  function deleteUser(id){
    alert(id)

  }



</script>